function RegisterModal() {
	this.creatDom();
	this.genCode();
	this.addListener();
}

RegisterModal.modalTemplate=`
	<div class="modal fade" id="regModal" tabindex="-1">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">用户注册</h4>
	      </div>
	      <div class="modal-body">
	      	<div class="alert alert-danger hidden register-error">用户注册失败，请稍后重试</div>
	        <form class="form-register">
			  <div class="form-group">
			    <label for="regUsername">用户名</label>
			    <input type="text" class="form-control" name="username" id="regUsername" placeholder="请输入用户名">
			  </div>
			  <div class="form-group">
			    <label for="regPassword">密码</label>
			    <input type="password" class="form-control" name="password" id="regPassword" placeholder="请输入密码">
			  </div>
			  <div class="form-group">
			    <label for="regConfPassword">确认密码</label>
			    <input type="password" class="form-control" id="regConfPassword" placeholder="请输入确认密码">
			  </div>
			  <div class="form-group">
				    <label for="loginCode">验证码</label>
				    <input type="text" class="form-control input-code" id="loginCode" placeholder="输入验证码">
				    <div class="code"></div>
				  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary btn-register">注册</button>
	      </div>
	    </div>
	  </div>
	</div>
`;
	
$.extend(RegisterModal.prototype,{
	//注册事件监听
	addListener(){
		$(".input-code").on("blur",this.codeHandler);
		$(".btn-register").on("click",this.registerHandler);
	},
	registerHandler(){
		//获取注册表单中的数据
		const data=$(".form-register").serialize();
		//请求API接口，实现用户注册
		const url="/api/users/register";
		$.post(url,data,(data)=>{
			if (data.res_body.status===1){
				// 注册成功即跳转登录页面
				location.href="/html/login.html";
				//保存登录成功的用户名
				//sessionStorage.username=data.res_body.data.username;
				//刷新页面
				//location.reload();
			}else{
				$(".register-error").removeClass("hidden");
			}
		},"json");
	},
	creatDom(){
		$("body").append(RegisterModal.modalTemplate);
	},
	// 生成验证码
	genCode() {
		$.getJSON("/api/captcha", (data) => {
			$(".code").html(data.res_body.data);
		})
	},
	// 校验验证码
	codeHandler(event) {
		// 输入的值
		const code = $(event.target).val();
		// ajax
		$.getJSON("/api/captcha/verify", {code}, (data)=>{
			if (data.res_body.valid) {
				alert("正确");
			} else {
				alert("错误");
			}
		})
	}
});

// new RegisterModal();